<!-- 顶部菜单 -->
<template>
  <div>
    <el-menu
      :default-active="activeMenu"
      class="top-el-menu"
      mode="horizontal"
      text-color="#606266"
      :active-text-color="variables.topMenuActiveText"
      :collapse-transition="false"
      @select="handleSelect"
    >
      <sidebar-item v-for="route in topFristMenus" :key="route.path" :item="route" :base-path="route.path" />
      <!--      <sidebar-item :menuData="topFristMenus" />-->
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import variables from '@/styles/variables.scss'
import SidebarItem from './SidebarItem'
export default {
  components: { SidebarItem },
  data() {
    return {
      // 首个链接地址
      fristPath: '',
      // 菜单存放集合
      topFristMenus: []
    }
  },
  computed: {
    ...mapGetters([
      'leftMenu',
      'menu'
    ]),
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      if (meta.title === '首页') {
        return JSON.parse(JSON.stringify(this.menu))[0].path
      }
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
      // let arr = []
      // arr = path.split('/')
      // const strPath = '/' + arr[1]
      // return strPath
    },
    variables() {
      return variables
    }
  },
  watch: {
    activeMenu(val) {
      if (val) {
        this.getLeftMenu(val)
      }
    },
    fristPath(val) {
      this.handleSelect(val, [val])
    },
    // 监听状态管理器中菜单的变化
    menu(val) {
      // 设置顶部首个菜单的path为空，从而获取新的值 监听发生变化，重新加载左侧菜单
      if (val) {
        this.fristPath = ''
        this.createTopMenu()
      }
    }
  },
  created() {
    // 获取顶部导航栏菜单
    this.createTopMenu()
  },
  methods: {
    // 加载页面顶部和左侧菜单
    createTopMenu() {
      this.getTopFristMenus()
    },
    // 菜单
    getTopFristMenus() {
      const menuList = JSON.parse(JSON.stringify(this.menu))
      if (menuList !== null && menuList.length > 0) {
        // 获取首个链接地址
        this.fristPath = this.activeMenu ? this.activeMenu : menuList[0].path
        this.topFristMenus = menuList.map((item) => {
          return item
        })
      } else {
        this.topFristMenus = []
      }
    },

    handleSelect(key, keyPath) {
      this.getLeftMenu(key)
    },
    // 获得左侧导航栏中的值
    getLeftMenu(key) {
      // JSON.parse(JSON.stringify(this.$store.getters.menu)) 这样复制对象原对象的值不会随着现对象的改变而改变
      const menu = JSON.parse(JSON.stringify(this.$store.getters.menu))
      const defaultMenu = this.tickMenuIdFilter(key).filter(menu)
      const newDefaultMenu = this.changeMenuPath(key).filter(defaultMenu)
      this.$store.dispatch('user/setLeftMenu', newDefaultMenu)
    },
    // 循环改变次菜单下面节点 中的path  （加上父类中的path）
    changeMenuPath: function(parentPath) {
      let resultArr = []
      const getTickMenuId = function(obj) {
        if (undefined === obj || obj == null || !(obj instanceof Object)) {
          return
        }
        if (obj.menuType === 'C' || obj.menuType === 'M') {
          obj.path = parentPath + '/' + obj.path
        }
      }
      return {
        filter: function(arr) {
          resultArr = []
          resultArr = arr
          if (!(arr instanceof Array)) {
            return false
          }
          for (const rootMenu of arr) {
            getTickMenuId(rootMenu)
          }
          return resultArr
        }
      }
    },
    // 遍历menu树获取一级菜单下的子菜单
    tickMenuIdFilter: function(path) {
      let resultArr = []
      const getTickMenuId = function(obj) {
        if (undefined === obj || obj == null || !(obj instanceof Object)) {
          return
        }
        if (obj.path === path) {
          resultArr = obj.children
        }
        if (obj.children != null && obj.children instanceof Array) {
          for (const child of obj.children) {
            getTickMenuId(child)
          }
        }
      }
      return {
        filter: function(arr) {
          resultArr = []
          if (!(arr instanceof Array)) {
            return false
          }
          for (const rootMenu of arr) {
            getTickMenuId(rootMenu)
          }
          return resultArr
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-menu-right-icon{
    width:60px;
    height:60px;
    line-height:56px;
  }
</style>
